import React, {useEffect, useState} from 'react';
import {Button, Card, message, Modal, Table, Tooltip} from "antd";
import {
    reqDeleteCourseOrderById,
    reqGetCourseOrderList
} from "../../../../api/backStage/backStageApi";
import {DeleteOutlined} from "@ant-design/icons";


const AdminCourseOrder = () => {

    const [orderList, setOrderList] = useState([])
    const [deleteOpen, setDeleteOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [orderId, setOrderId] = useState(null)

    useEffect(() => {
        getData()
    }, [])
    const getData = async () => {
        const result = await reqGetCourseOrderList()
        setOrderList(result.data)
    }
    const columns = [
        {
            title: '订单号',
            dataIndex: 'order_id',
            key: 'order_id',
            width: 400
        },
        {
            title: '课程标题',
            dataIndex: 'title',
            key: 'title',
            width: 400,
            render: text => <span style={{color: '#1677ff'}}>{text}</span>
        },
        {
            title: '作者',
            dataIndex: 'author_name',
            key: 'author_name',
            width: 200,
        },
        {
            title: '价格',
            dataIndex: 'now_price',
            key: 'now_price',
            width: 200,
            render: text => <span>￥{text}</span>
        },
        {
            title: '订单状态',
            dataIndex: 'status',
            key: 'status',
            width: 300,
            render: text => text === '未支付' ? <span style={{color: 'red'}}>{text}</span> :
                <span style={{color: '#52c41a'}}>{text}</span>
        },
        {
            title: '操作',
            dataIndex: '',
            key: 'x',
            render: (_, record) => <Tooltip title="删除">
                <Button onClick={() => {
                    setOrderId(record.order_id)
                    setDeleteOpen(true)
                }} type="primary" danger>
                    <DeleteOutlined/>
                </Button>
            </Tooltip>,
        },
    ];


    //删除操作成功
    const deleteCourseOk = async () => {
        try {
            setConfirmLoading(true);
            const result= await reqDeleteCourseOrderById({order_id:orderId})
            if (result.status===0){
                setTimeout(async () => {
                    await getData()
                    setDeleteOpen(false);
                    setConfirmLoading(false);
                    message.success('删除课程订单成功!')
                }, 1000);
            }
        } catch (err) {
            message.error('删除订单失败！')
        }
    };
    const deleteCourseCancel = () => {
        setDeleteOpen(false);
    };


    return (
        <div>
            <Card style={{height: 800}}>
                <Table
                    rowKey={(record) => record.order_id}
                    scroll={{
                        y: 800,
                    }}
                    bordered
                    columns={columns}
                    dataSource={orderList}
                />
            </Card>
            <Modal
                centered
                title="确认删除所选项吗？"
                open={deleteOpen}
                onOk={deleteCourseOk}
                okText="确认删除"
                cancelText="取消"
                confirmLoading={confirmLoading}
                onCancel={deleteCourseCancel}
            >
                <p>删除之后不可恢复！</p>
            </Modal>
        </div>
    );
};

export default AdminCourseOrder;